<template>
	<view class="dot-wrapper-box"
		:style="'transform:translateX('+translateX+'px);width:'+dot_distance+'px;height:'+dot_distance+'px;'">
		<block v-for="(item,index) in resdata">
			<view class="dot-wrapper">
				<view class="dot" :class="index===currentIndex-2?'prew_2_dot':
							  index===currentIndex-1?'prew_1_dot':
							  index===currentIndex?'current-dot bac-col-00b':
							  index===currentIndex+1?'next_1_dot':
							  index===currentIndex+2?'next_2_dot':''">

				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "swiper-dynamic-bullets",
		props: {
			// 轮播图数据
			resdata: {
				type: Array
			},
			// 指示点的中心距离,相当于指示点之间的距离
			dot_distance: {
				type: [Number, String],
				default: 20
			},
			// 当前指示点索引
			currentIndex: {
				type: [Number, String],
				default: 0
			},
			// 指示点宽高
			dotWidth: {
				type: [Number, String],
				default: 10
			}
		},
		data() {
			return {

			};
		},
		computed: {
			translateX() {
				return -(+this.currentIndex) * (+this.dot_distance) - (+this.dot_distance) / 2
			}
		},
	}
</script>

<style lang="scss">
	// 指示点外边框
	.dot-wrapper-box {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 0 auto;
		transition: .3s;
	}

	.dot-wrapper {
		flex-shrink: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dot {
		background-color: #ffffff;
		border: 2rpx solid #14cc60;
		transition: .3s;
	}

	.prew_2_dot,
	.next_2_dot {
		width: 10rpx;
		height: 10rpx;
	}

	.prew_1_dot,
	.next_1_dot {
		width: 12rpx;
		height: 12rpx;
	}

	.current-dot {
		width: 14rpx;
		height: 14rpx;
	}
</style>